<!--
 * @Author: your name
 * @Date: 2020-08-03 09:29:56
 * @LastEditTime: 2020-08-06 08:56:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devops\VueElementUINew\src\views\product\index.vue
--> 
<template>
  <div>
    <Header-Tab
      :tab-name="tabName"
      :tab-list="tabList"
      :is-collapse="isCollapse"
      :aside-width="asideWidth"
      @tabChange="tabChange"
    >
      <div slot="need">
        <Need-Aside ref="aside" :is-collapse="isCollapse" @toggleHandler="toggleHandler" />
        <state-filter></state-filter>
        <q-table></q-table>
        <q-grep v-if="false"></q-grep>
      </div>
      <div slot="iteration">222</div>
      <div slot="general">333</div>
    </Header-Tab>
  </div>
</template>

<script>
import NeedAside from './components/NeedAside';
import HeaderTab from '@/components/HeaderTab/index';
import StateFilter from './components/StateFilter'
import QTable from '@/components/QTable'
import QGrep from '@/components/QGrep'
export default {
  components: { NeedAside, HeaderTab, StateFilter, QTable, QGrep },
  data() {
    return {
      isCollapse: true,
      tabName: 'need',
      asideWidth: 0,
      currentIndex: 0,
      tabList: [
        { label: '需求', name: 'need' },
        { label: '迭代', name: 'iteration' },
        { label: '概况', name: 'general' },
      ],
    };
  },
  mounted() {
    this.getAsideWidth();
  },
  methods: {
    getAsideWidth() {
      this.asideWidth = this.$refs.aside.$el.offsetWidth;
    },
    toggleHandler() {
      this.getAsideWidth();
      this.isCollapse = !this.isCollapse;
    },
    tabChange(event) {
      this.currentIndex = event.index;
      this.isCollapse = false;
      this.getAsideWidth();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../../styles/main.css';
.product-wrap {
  display: inline-block;
  height: 100%;
  width: 100%;
  .product-head {
    width: 100%;
    height: 58px;
    line-height: 58px;
    background-color: #fff;
    padding: 0 30px;
    border-bottom: 1px solid #ccc;
  }
  .product-aside {
    display: inline-block;
    min-height: calc(100vh - 60px);
    width: 260px;
    background-color: #fff;
  }
}
</style>
